<template>
  <!--  用户信息盒子-包括推荐歌手-->
  <div class="all-userinfo-message-box">
    <div v-show="!whetherShowUserMessage" class="promp-to-log-in">
      登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
      <button @click="wantLogin" class="login-btn hvr-grow-shadow">登 陆</button>
    </div>
    <!--    用户信息-->
    <div v-show="whetherShowUserMessage" class="user-message-container">
      <!--      用户头像，用户名，用户等级，用户签到-->
      <div class="user-avatar-name-grade-sign">
        <!--        用户头像-->
        <div class="user-avatar">
          <img class="user-avatar-img" :src="userAvatar" alt="">
        </div>
        <!--        用户名，用户等级，用户签到-->
        <div class="user-name-grade-sign">
          <!--          用户名-->
          <div class="user-name">
            {{ username }}
          </div>
          <!--          用户等级-->
          <div class="user-grade">
            LV . {{ level }}
          </div>
          <!--          用户签到-->
          <div class="user-sign">
            <el-button>签 到</el-button>
          </div>
        </div>
      </div>
      <div class="create-days-follows-followeds">
        <div class="create-days">
          陪伴您
          <div style="font-size: 25px;display: inline-block">{{ createDays }}</div>
          天啦！
        </div>
        <div class="follows-followeds">
          <div class="follows">
            关注
            <div style="font-size: 25px;display: inline-block">{{ follows }}</div>
          </div>
          <div class="followeds">
            粉丝
            <div style="font-size: 25px;display: inline-block">{{ followeds }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {userSignIn, yunBeiToday} from "@/network/recommend/userSignIn";

export default {
  name: "RecommendUserMessage",
  data() {
    return {
      whetherShowUserMessage: false,
      // 用户各项需要展示的信息
      userAvatar: '',
      username: '',
      level: '',
      createDays: '',
      follows: '',
      followeds: '',
    }
  },
  created() {
    this.bus.$on('haveLogin', this.getHaveLogin)//接收用户登陆完成事件，显示用户信息展示框并在其中展示用户数据
    // this.todaySignMessage()
  },
  methods: {
    wantLogin() {
      this.bus.$emit('userWantLogin')
    },
    getHaveLogin() {//显示用户信息展示框，并获取用户需要展示的信息
      this.whetherShowUserMessage = true//展示用户信息框
      this.userAvatar = this.$store.state.carousel.userDetails.profile.avatarUrl
      this.username = this.$store.state.carousel.userDetails.profile.nickname
      this.level = this.$store.state.carousel.userDetails.level
      this.createDays = this.$store.state.carousel.userDetails.createDays
      this.follows = this.$store.state.carousel.userDetails.profile.follows
      this.followeds = this.$store.state.carousel.userDetails.profile.followeds
    },
    //TODO 用户签到功能！！！！！！！
    // async todaySignMessage() {
    //   const {data: SignMessage} = await yunBeiToday()
    //   console.log(SignMessage)
    // },
    // async userWantSignIn() {
    //   const {data: res} = await userSignIn()
    //   console.log(res)
    // },
  },
}
</script>

<style scoped lang="less">
.all-userinfo-message-box {
  //margin-left: 10px;
  height: 180px;
  border: 1px solid #787878;
  border-radius: 20px;
  
  .promp-to-log-in {
    padding: 0 10px 0 10px;
    font-size: 13px;
    margin-top: 20px;
    display: flex;
    height: 80%;
    color: #b4b1af;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
    .login-btn {
      height: 40px;
      width: 70px;
      background-color: #B2281E;
      color: #ffffff;
      border-radius: 20px;
      border: 2px solid #AEAEAE;
      cursor: pointer;
    }
  }
  
  .user-message-container {
    
    
    .user-avatar-name-grade-sign {
      padding-top: 14px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      
      .user-avatar {
        
        .user-avatar-img {
          height: 80px;
          width: 80px;
          border-radius: 20px;
        }
      }
      
      .user-name-grade-sign {
        
        
        .user-name {
          font-size: 12px;
          color: #ffffff;
        }
        
        .user-grade {
          text-align: center;
          width: 50px;
          margin: 10px 0 10px 0;
          color: #AEAEAE;
          font-size: 12px;
          border-radius: 20%;
          border: 1px solid #AEAEAE;
        }
        
        .user-sign {
          /deep/ .el-button {
            background-color: rgba(196, 70, 67, 0.78);
            padding: 0;
            height: 25px;
            width: 70px;
            color: #AEAEAE;
            border: 1px solid #AEAEAE;
            transition: all .2s linear;
            
            &:hover {
              color: white;
            }
          }
          
        }
        
      }
      
      
    }
    
    .create-days-follows-followeds {
      display: flex;
      flex-direction: column;
      
      .create-days {
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin: 10px 0 0 0;
        color: #AEAEAE;
        transition: all .2s linear;
        
        &:hover {
          color: #ffffff;
        }
      }
      
      .follows-followeds {
        display: flex;
        justify-content: space-evenly;
        
        .follows {
          font-size: 14px;
          color: #AEAEAE;
          transition: all .2s linear;
          
          &:hover {
            color: #ffffff;
          }
          
        }
        
        .followeds {
          font-size: 14px;
          color: #AEAEAE;
          transition: all .2s linear;
          
          &:hover {
            color: #ffffff;
          }
        }
        
      }
      
    }
    
  }
}
</style>
